/** @jsxImportSource react */

import { qwikify$ } from '@builder.io/qwik-react';
import _ from 'lodash';
import { useState } from 'react';
import { Button } from '~/components/react/shadcn/ui/button';
import { Input } from '~/components/react/shadcn/ui/input';
import { Toaster } from '~/components/react/shadcn/ui/toaster';
import { useToast } from '~/components/react/shadcn/ui/use-toast';
import { MarkdownInput } from '~/components/react/ui/Markdown';
import { Columns2, PanelLeft, PanelRight } from 'lucide-react';
import { ToggleGroup, ToggleGroupItem } from '~/components/react/shadcn/ui/toggle-group';
import type { Result, SimpleTag } from '~/common/types';

import Tag from './Tag';
import TagsInput from './TagsInput';

type Data = { title: string; content: string; tags: SimpleTag[] };

type PostEditorProps = {
  data: Data;
  onSave: (data: Data) => Promise<void>;
  onSearchTags: (text: string) => Promise<Result<SimpleTag[], string>>;
  onCreateTag: (text: string) => Promise<Result<SimpleTag, string>>;
};

function PostEditor({ data, onSave, onSearchTags, onCreateTag }: PostEditorProps) {
  const [title, setTitle] = useState(data.title);
  const [content, setContent] = useState(data.content);
  const [mdMode, setMdMode] = useState('11');
  const [tags, setTags] = useState<SimpleTag[]>(data.tags);
  const { toast } = useToast();
  return (
    <div className="bg-white p-1">
      <div>
        <Input value={title} onChange={(e) => setTitle(e.target.value)} />
      </div>
      <div className="flex my-2 justify-between items-center">
        <div className="flex gap-1">
          {tags.map((tag) => (
            <Tag
              selected
              key={tag.id.toString()}
              tag={tag}
              onClick={(t) => setTags(_.filter(tags, (it) => it.id !== t.id))}
            />
          ))}
          <TagsInput onSearchTags={onSearchTags} onCreateTag={onCreateTag} value={tags} onChange={setTags} />
        </div>
        <span>
          <ToggleGroup
            type="single"
            variant="outline"
            size="sm"
            value={mdMode}
            onValueChange={(v) => setMdMode(v || '11')}
          >
            <ToggleGroupItem value="10">
              <PanelRight className="h-4 w-4" />
            </ToggleGroupItem>
            <ToggleGroupItem value="11">
              <Columns2 className="h-4 w-4" />
            </ToggleGroupItem>
            <ToggleGroupItem value="01">
              <PanelLeft className="h-4 w-4" />
            </ToggleGroupItem>
          </ToggleGroup>
        </span>
      </div>
      <div>
        <MarkdownInput
          value={content}
          onChange={(it) => setContent(it)}
          style={{ height: 'calc(100vh - 360px)' }}
          mode={mdMode as '10' | '11' | '01'}
        />
      </div>
      <div className="flex justify-end my-2">
        <Toaster />
        <Button
          onClick={() =>
            onSave({ title, content, tags }).catch((err) => {
              toast({ title: '保存失败', variant: 'destructive', description: _.get(err, 'message', '未知错误') });
            })
          }
        >
          保存
        </Button>
      </div>
    </div>
  );
}

export const QPostEditor = qwikify$(PostEditor);
